<template>
  <div class="app-container flex1 flex-col over-hidden product-property-list">
    <el-form class="flex-shrink-0">
      <el-form
        class="flex-shrink-0"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
      <el-row :gutter="20">
        <el-col :span="6">
           <el-form-item label="申请订单号" prop="planCode">
          <el-input
            v-model="queryParams.planCode"
            placeholder="请输入申请订单号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width:240px"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="客户名称" prop="planName">
          <el-input
            v-model="queryParams.planName"
            placeholder="请输入客户名称"
            clearable
            size="small"
            style="width:240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="交易平台" prop="tradeStatus">
            <el-select
              v-model="queryParams.tradeStatus"
              placeholder="请选择交易平台"
              clearable
              size="small"
              style="width:240px"
            >
              <el-option
                v-for="status in tradeArr"
                :key="status.dictValue"
                :label="status.dictLabel"
                :value="status.dictValue"
              ></el-option>
          </el-select>
        </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
           <el-form-item label="保函编码" prop="bhCode">
          <el-input
            v-model="queryParams.bhCode"
            placeholder="请输入保函编码"
            clearable
            size="small"
            style="width:240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请日期" prop="deliveryTime">
            <el-date-picker
              style="width:240px"
              size="small"
              v-model="queryParams.deliveryTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="当前状态" prop="status">
              <el-select
                v-model="queryParams.status"
                placeholder="请选择当前状态"
                clearable
                size="small"
                style="width:240px"
              >
                <el-option
                  v-for="status in statusArr"
                  :key="status.dictValue"
                  :label="status.dictLabel"
                  :value="status.dictLabel"
                ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="handleQuery"
          >
            查询
          </el-button>
        </el-form-item>
      </el-row> 
        
      </el-form>
    </el-form>
    <!-- 剩余空间通过 flex1 全部分给表格，over-hidden 必须使用 -->
    <div class="flex1 over-hidden">
      <el-table
        :data="showData"
        height="100%"
        v-loading="loading"
      >
        <el-table-column
          align="center"
          label="序号"
          prop="serialNumber"
        ></el-table-column>

        <el-table-column
          align="center"
          label="申请订单号"
          prop="planCode"
        ></el-table-column>

        <el-table-column
          align="center"
          label="交易平台"
          prop="planName"
        ></el-table-column>

        <el-table-column
          align="center"
          label="申请单位"
          prop="declareCompany"
        ></el-table-column>

        <el-table-column
          align="center"
          label="保函编码"
          prop="purchaser"
        ></el-table-column>

        <el-table-column
          align="center"
          label="申请金额"
          prop="applyMoeny"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="toOrderDetail(scope.row)"
              >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      class="text-center bgfff pd10 flex-shrink-0"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size.sync="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { tableMixin } from "@/mixins/index";
import { dictFilter } from "@/utils/filters/common";
export default {
  mixins: [ tableMixin ],
  filters: { dictFilter },
  data() {
    return {
      total: 0,
      tableData: [
        {
          serialNumber: "1", // 序号
          planCode: "85211167776", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "成都锐衡洪业装饰工程有限公司	", // 申报单位
          purchaser: "LG85211167776", // 采购商
          status: "待支付", // 当前状态
          currentStatus: "待支付", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '50000', // 钢材总量计划
          grossArea: '50000', // 建筑面积（M）
          orderStatus:'通过',// 审批管理状态
          surrenderApproval:'受理中',  // 理赔管理状态
          claimApproval:'已理赔',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "2", // 序号
          planCode: "44122342691", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "四川康林建设工程有限公司", // 申报单位
          purchaser: "LG44122342691", // 采购商
          status: "已取消", // 当前状态
          currentStatus: "待开函", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '10000', // 钢材总量计划
          grossArea: '12000', // 建筑面积（M),
          orderStatus:'通过',// 审批管理状态
          surrenderApproval:'受理中',  // 理赔管理状态
          claimApproval:'已理赔',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "3", // 序号
          planCode: "10711708742", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "四川康亿建设有限公司	", // 申报单位
          purchaser: "LG10711708742", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "已出函", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M
          orderStatus:'通过',// 审批管理状态
          surrenderApproval:'受理中',  // 理赔管理状态
          claimApproval:'已理赔',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "4", // 序号
          planCode: "88807795609", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "四川中港建设工程有限公司	", // 申报单位
          purchaser: "LG88807795609", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "已取消", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
          orderStatus:'通过',// 审批管理状态
          surrenderApproval:'受理中',  // 理赔管理状态
          claimApproval:'已理赔',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "5", // 序号
          planCode: "60811819174", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "四川康立项目管理有限责任公司	", // 申报单位
          purchaser: "LG88807795609", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "退保中", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
          orderStatus:'拒绝',// 审批管理状态
          surrenderApproval:'受理中',  // 理赔管理状态
          claimApproval:'已理赔',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "6", // 序号
          planCode: "60811819178", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "成都衡泰工程管理有限责任公司", // 申报单位
          purchaser: "LG60811819178", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "退保成功", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
          orderStatus:'拒绝',// 审批管理状态
          surrenderApproval:'受理中',  // 理赔管理状态
          claimApproval:'已理赔',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "7", // 序号
          planCode: "60811819181", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "四川省三台柒建有限责任公司", // 申报单位
          purchaser: "LG60811819181", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "退保拒绝", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
          orderStatus:'拒绝',// 审批管理状态
          surrenderApproval:'受理中',  // 理赔管理状态
          claimApproval:'已理赔',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "8", // 序号
          planCode: "60811819178", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "成都衡泰工程管理有限责任公司", // 申报单位
          purchaser: "LG60811819183", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "理赔中", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
          orderStatus:'拒绝',// 审批管理状态
          surrenderApproval:'已拒绝',  // 理赔管理状态
          claimApproval:'已拒绝',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "9", // 序号
          planCode: "60811819186", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "四川省三台柒建有限责任公司", // 申报单位
          purchaser: "LG60811819186", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "理赔拒绝", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
          orderStatus:'拒绝',// 审批管理状态
          surrenderApproval:'已拒绝',  // 理赔管理状态
          claimApproval:'已拒绝',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
        },
        {
          serialNumber: "10", // 序号
          planCode: "60811819188", // 计划编号
          planName: "公共资源交易中心", // 计划名称
          declareCompany: "四川中港建设工程有限公司", // 申报单位
          purchaser: "LG60811819188", // 采购商
          status: "审核中", // 当前状态
          currentStatus: "理赔成功", // 当前状态
          createTime: "2022-07-09", // 创建时间
          applyMoeny: "50000", // 申请金额
          projectName: "admin", // 项目名称
          planTotal: '17000', // 钢材总量计划
          grossArea: '20000', // 建筑面积（M）
          orderStatus:'拒绝',// 审批管理状态
          surrenderApproval:'已拒绝',  // 理赔管理状态
          claimApproval:'已拒绝',//退保审批状态
          abnormalCause:'无',// 异常原因
          handledBy:'张三', // 经办人
          
        },
      ],
      loading: false,
      tradeArr: [
        {
          dictValue: "01",
          dictLabel: "****公共资源交易中心",
        },
        {
          dictValue: "02",
          dictLabel: "****公共资源交易中心",
        },
        {
          dictValue: "03",
          dictLabel: "****公共资源交易中心",
        }
      ],
      statusArr: [
        {
          dictValue: "01",
          dictLabel: "待支付",
        },
        {
          dictValue: "02",
          dictLabel: "已取消",
        },
        {
          dictValue: "03",
          dictLabel: "审核中",
        },
        {
          dictValue: "04",
          dictLabel: "已拒绝",
        },
        {
          dictValue: "05",
          dictLabel: "预开函",
        },
        {
          dictValue: "06",
          dictLabel: "已退保",
        },
        {
          dictValue: "07",
          dictLabel: "已开函",
        },
      ],
      queryParams: {
        planCode: "",
        planName: "",
        status: "",
        tradeStatus: '',
        bhCode: '',
        deliveryTime: ''
      },
      orderData: null,
      showOrderDetail: false,
      showDeliveryForm: false,
      showData: []
    };
  },
  created() {
    window.localStorage.removeItem('TABLE_DATA');
    const DATA = window.localStorage.getItem('TABLE_DATA') || '' ;
    if (DATA) {
      this.showData = JSON.parse(DATA);
    } else {
      this.showData = this.tableData;
      window.localStorage.setItem('TABLE_DATA',JSON.stringify(this.tableData));
    }
    
  },
  computed: {
    // tableData() {
    //   return this.$store.state.products.propertyList;
    // },
  },
  methods: {
    getList() {},
    closeDialog(){
    },
    toOrderDetail(orderData){
       this.$router.push({
        name:'Order-detail',
        query:{
          serialNumber: orderData.serialNumber,
        },
      })
    },
    toDelivery(orderData){
     
    },
    handleQuery () {

      if (!this.queryParams.status) {
        this.showData = this.tableData
      }else {
        this.showData = this.tableData.filter(v => {
          return v.currentStatus == this.queryParams.status
        })
      }
    },
  },
};
</script>

<style scoped lang="scss">
.product-property-list {
  height: 100%;
  .opt-btn {
    padding: 20px;
  }
  .update-btn {
    padding-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
